<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
		
			#myCan {
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<canvas id="myCan" width="1000px" height="800px"></canvas>
		<script type="text/javascript">
			var oC = document.getElementById('myCan');
			var ctx = oC.getContext('2d');
			ctx.fillStyle='green'
			ctx.moveTo(200,220);
			// ctx.bezierCurveTo(270,100,330,240,208,300);
			// ctx.bezierCurveTo(50,190,180,135,202,200);
			ctx.bezierCurveTo(130,150,100,275,200,320)
			ctx.bezierCurveTo(300,275,270,150,200,220)
			
			ctx.fill();
			ctx.stroke();
		</script>
	</body>
</html>
